/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-06-13 09:48:00
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-08-07 21:42:11
 * @FilePath: \vite-project\src\components\common\ImagePreview.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Alert, Card, Empty } from 'antd';
import { Base64 } from 'js-base64';
import React from 'react';

const InvoicePreview: React.FC<{ previweSrc: string; desc?: string }> = ({ previweSrc, desc = '请上传发票进行预览' }) => {
	const iframePreviewSrc =
		`${import.meta.env.VITE_NODE_ENV === 'prod' ? '' : 'http://10.20.1.250:82'}` +
		`/fileview/onlinePreview?url=${encodeURIComponent(Base64.encode(previweSrc))}`;

	console.log('decodeURIComponent(previweSrc)', decodeURIComponent(previweSrc));
	console.log('previweSrc', previweSrc);
	console.log('iframePreviewSrc', iframePreviewSrc);
	console.log('Base64.encode(previweSrc)');
	console.log(Base64.encode(previweSrc), 'encodeURIComponent(Base64.encode(previweSrc))', encodeURIComponent(Base64.encode(previweSrc)));

	return (
		<Card>
			<Alert
				message="发票智能上传图片，PDF、OFD格式，大小不超过20M， 如果发票识别不成功或识别有误，请手动填写。"
				type="info"
				className="mb-20px"
			/>
			{previweSrc ? (
				<div className="relative  bg-[#f5f5f5]">
					<iframe src={iframePreviewSrc} className="w-full h-70vh border-none overflow-hidden" allowFullScreen></iframe>
				</div>
			) : (
				<Empty className="h-70vh flex justify-center items-center" description={desc} imageStyle={{ height: 100 }} />
			)}
		</Card>
	);
};

export default InvoicePreview;
